<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>邮件工具</span>
      </div>

      <el-form
        :model="sendForm"
        ref="form"
        :rules="rules"
        label-width="100px"
        style="width: 70%; margin: auto"
      >
        <el-form-item label="邮件收件人" prop="toMail">
          <el-input
            v-model="sendForm.toMail"
            placeholder="请输入邮件收件地址，多个地址英文分号;隔开"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="邮件主题" prop="subject">
          <el-input
            v-model="sendForm.subject"
            placeholder="请输入邮件主题"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="邮件内容" prop="content">
          <el-input
            v-model="sendForm.content"
            placeholder="请输入邮件内容"
            type="textarea"
            :rows="5"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-s-promotion"
            size="mini"
            @click="submitForm"
            >发 送</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="reset"
            >重 置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { send } from '@/api/tool/mail'

export default {
  name: 'Mail',
  data() {
    var patter =
      /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\;))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/
    var isMoreMail = (rule, value, callback) => {
      if (!patter.test(value)) {
        return callback(new Error('收件地址不正确'))
      } else {
        callback()
      }
    }
    return {
      // 表单参数
      sendForm: {
        toMail: undefined,
        subject: undefined,
        content: undefined
      },
      // 表单校验
      rules: {
        toMail: [
          { required: true, message: '收件地址不能为空', trigger: 'blur' },
          { validator: isMoreMail }
        ],
        subject: [{ required: true, message: '主题不能为空', trigger: 'blur' }],
        content: [
          { required: true, message: '邮件内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  methods: {
    /** 重置按钮操作 */
    reset() {
      this.sendForm = {
        toMail: undefined,
        subject: undefined,
        content: undefined
      }
      this.resetForm('form')
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          send(this.sendForm).then((response) => {
            this.$modal.msgSuccess(response.msg)
            this.reset()
          })
        }
      })
    }
  }
}
</script>
